<template>
  <div>
    <h2>{{ info.name }}</h2>
    <button @click="changeInfo">修改info</button>
  </div>
</template>

<script>
import { shallowRef, triggerRef } from "vue";
export default {
  setup() {
    const info = shallowRef({ name: "pengfan", age: 21 });
    const changeInfo = () => {
      info.value.name = "pengyutong";
      triggerRef(info);
    };
    return {
      info,
      changeInfo
    };
  },
};
</script>

<style scoped>
</style>